<template>
  <div class="user-profile">
    <!-- 头部用户信息 -->
    <div class="user-header">
      <div class="user-avatar">
        <img :src="userAvatar" alt="头像" @error="handleAvatarError">
      </div>
      <div class="user-info">
        <h3>{{ displayName }}</h3>
        <p>{{ displayPhone }}</p>
        <p>{{ displayEmail }}</p>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-list">
      <!-- 个人信息 -->
      <div class="menu-item" @click="toPersonalInfo">
        <i class="fas fa-user-edit"></i>
        <span>个人信息</span>
        <i class="fas fa-chevron-right"></i>
      </div>

      <!-- 我的钱包 -->
      <div class="menu-item" @click="toWallet">
        <i class="fas fa-wallet"></i>
        <span>我的钱包</span>
        <i class="fas fa-chevron-right"></i>
      </div>

      <!-- 修改密码 -->
      <div class="menu-item" @click="toChangePassword">
        <i class="fas fa-lock"></i>
        <span>修改密码</span>
        <i class="fas fa-chevron-right"></i>
      </div>

      <!-- 退出登录 -->
      <div class="menu-item logout" @click="handleLogout">
        <i class="fas fa-sign-out-alt"></i>
        <span>退出登录</span>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="bottom-bar">
      <div
          class="bottom-btn"
          :class="{ active: activeTab === 'home' }"
          @click="setActiveTab('home')"
      >
        <i class="fas fa-home"></i>
        <span>首页</span>
      </div>

      <div
          class="bottom-btn"
          :class="{ active: activeTab === 'orders' }"
          @click="setActiveTab('orders')"
      >
        <i class="fas fa-clipboard-list"></i>
        <span>订单</span>
      </div>
      <div
          class="bottom-btn"
          :class="{ active: activeTab === 'data' }"
          @click="setActiveTab('data')"
      >
        <i class="fas fa-chart-line"></i>
        <span>数据</span>
      </div>
      <div
          class="bottom-btn"
          :class="{ active: activeTab === 'profile' }"
          @click="setActiveTab('profile')"
      >
        <i class="fas fa-user"></i>
        <span>我的</span>
      </div>
    </div>

  </div>
</template>

<script setup>
import {ref, onMounted, computed, onActivated} from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { userAPI } from '@/api/user.js'
import Footer from "@/components/Footer.vue";

const router = useRouter()
const authStore = useAuthStore()

// 用户信息
const userInfo = ref({
  firstName: '',
  lastName: '',
  phone: '',
  email: '',
  username: '',
  photo: ''
})
const avatarError = ref(false)
const activeTab = ref('profile')
// 计算属性：用户头像
const userAvatar = computed(() => {
  if (avatarError.value || !userInfo.value.photo) {
    return require('@/assets/userImg/userImg.png')
  }
  return userInfo.value.photo
})

// 计算属性：全名
const fullName = computed(() => {
  if (userInfo.value.firstName && userInfo.value.lastName) {
    return userInfo.value.lastName + userInfo.value.firstName
  } else if (userInfo.value.firstName) {
    return userInfo.value.firstName
  } else if (userInfo.value.lastName) {
    return userInfo.value.lastName
  } else {
    return '未设置昵称'
  }
})
// 导航功能

const setActiveTab = (tab) => {
  activeTab.value = tab
  // 这里可以根据tab跳转到不同页面或加载不同数据
  switch (tab) {
    case 'home':
      router.push('/BusinessEnd')
      break
    case 'orders':
      router.push('/business-orders')
      break
    case 'data':
      router.push('/business-data')
      break
    case 'profile':
      break
  }
}
// 页面加载时获取用户信息
onMounted(async () => {
  await loadUserInfo()
})

// 当页面被激活时重新加载数据（解决缓存问题）
onActivated(async () => {
  await loadUserInfo()
})

// 头像加载失败处理
const handleAvatarError = () => {
  avatarError.value = true
}

// 加载用户信息
const loadUserInfo = async () => {
  try {
    const response = await userAPI.information()
    console.log('完整响应:', response)

    // 简化数据处理逻辑
    let data = null

    // 根据实际响应结构调整
    if (response.data && response.data.success === true && response.data.data) {
      // 如果后端返回 { success: true, code: 'OK', data: {...}, message: null }
      data = response.data.data
    } else if (response.data && response.data.id) {
      // 如果后端直接返回 Person 对象
      data = response.data
    } else {
      // 其他情况
      data = response.data
    }

    console.log('提取的用户数据:', data)

    if (data) {
      userInfo.value = data
      formData.value = {
        username: data.username || '',
        firstName: data.firstName || '',
        lastName: data.lastName || '',
        phone: data.phone || '',
        email: data.email || '',
        gender: data.gender || '',
        photo: data.photo || ''
      }
    } else {
      console.error('未获取到用户数据')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 跳转到个人信息页面
const toPersonalInfo = () => {
  console.log('跳转到个人信息页面')
  router.push('/personalInfo')
}

// 跳转到修改密码页面
const toChangePassword = () => {
  console.log('跳转到修改密码页面')
  router.push('/changePassword')
}

// 跳转到钱包页面
const toWallet = () => {
  console.log('跳转到钱包页面')
  router.push('/wallet')
}


// 退出登录
const handleLogout = () => {
  if (confirm('确定要退出登录吗？')) {
    authStore.logout()
    router.push('/login')
  }
}

const displayName = computed(() => {
  const user = userInfo.value
  if (user.firstName && user.lastName) {
    return user.lastName + user.firstName
  } else if (user.firstName) {
    return user.firstName
  } else if (user.lastName) {
    return user.lastName
  } else if (user.username) {
    return user.username
  } else {
    return '未设置昵称'
  }
})

const displayPhone = computed(() => {
  return userInfo.value.phone ? userInfo.value.phone : '未绑定手机'
})

const displayEmail = computed(() => {
  return userInfo.value.email ? userInfo.value.email : '未绑定邮箱'
})

</script>



<style scoped>
.user-profile {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 14vw; /* 为底部导航留出空间 */
}

.user-header {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  padding: 6vw 4vw;
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 4vw;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info h3 {
  font-size: 5vw;
  margin-bottom: 1vw;
}

.user-info p {
  font-size: 3.5vw;
  opacity: 0.9;
}

.menu-list {
  background: white;
  margin-top: 3vw;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 4vw;
  border-bottom: 1px solid #f0f0f0;
  font-size: 4vw;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: #f9f9f9;
}

.menu-item i:first-child {
  width: 6vw;
  text-align: center;
  margin-right: 3vw;
  color: #666;
}

.menu-item span {
  flex: 1;
  color: #333;
}

.menu-item i:last-child {
  color: #ccc;
  font-size: 3.5vw;
}

.menu-item.logout {
  color: #ff4757;
  margin-top: 3vw;
}

.menu-item.logout i:first-child {
  color: #ff4757;
}

.menu-item.logout span {
  color: #ff4757;
}


/****************** 底部菜单部分 ******************/
/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  //max-width: 396px;
  height: 60px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.bottom-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: #666;
  font-size: 12px;
  text-align: center;
  transition: color 0.2s;
}

.bottom-btn i {
  font-size: 20px;
  margin-bottom: 3px;
}

.bottom-btn.active {
  color: #0097ff;
}

.bottom-btn:active {
  transform: scale(0.95);
}
</style>